const { resolve } = require('path');
const getCssLoaders = require('../getCssLoaders');
const { isDev, PROJECT_PATH } = require('../constant');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Webpackbar = require('webpackbar');
const CopyPlugin = require('copy-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
const theme = require('../themes').default;

module.exports = {
    entry: {
        app: resolve(PROJECT_PATH, './src/index.tsx'),
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
        alias: {
            '@src': resolve(PROJECT_PATH, './src'),
            '@components': resolve(PROJECT_PATH, './src/components'),
            '@utils': resolve(PROJECT_PATH, './src/utils'),
            '@store': resolve(PROJECT_PATH, './src/store'),
            '@const': resolve(PROJECT_PATH, './src/const'),
            '@api': resolve(PROJECT_PATH, './src/api'),
        },
    },
    module: {
        rules: [
            {
                test: /\.(tsx?|jsx?)$/,
                loader: 'babel-loader',
                options: { cacheDirectory: true },
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                exclude: /node_modules/,
                use: [...getCssLoaders(1)],
            },
            {
                test: /\.less$/,
                exclude: /node_modules/,
                use: [
                    ...getCssLoaders(2),
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: isDev,
                            lessOptions: {
                                // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
                                modifyVars: {
                                    ...theme,
                                },
                                javascriptEnabled: true,
                            },
                        },
                    },
                ],
            },
            {
                test: /\.scss$/,
                exclude: /node_modules/,
                use: [
                    ...getCssLoaders(2),
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: isDev,
                        },
                    },
                ],
            },
            {
                test: /\.css$/,
                include: /node_modules|antd\.css/,
                use: [
                    isDev
                        ? {
                              loader: 'style-loader',
                          }
                        : {
                              loader: MiniCssExtractPlugin.loader,
                          },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: false,
                        },
                    },
                ],
            },
            {
                test: /\.less$/,
                include: /node_modules|antd\.less/,
                use: [
                    isDev
                        ? {
                              loader: 'style-loader',
                          }
                        : {
                              loader: MiniCssExtractPlugin.loader,
                          },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: false,
                        },
                    },
                    {
                        loader: 'less-loader',
                        options: {
                            sourceMap: isDev,
                            lessOptions: {
                                modifyVars: {
                                    ...theme,
                                },
                                javascriptEnabled: true,
                            },
                        },
                    },
                ],
            },
            {
                test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 4 * 1024,
                    },
                },
            },
            {
                test: /\.(ttf|woff|woff2|eot|otf)$/,
                type: 'asset/resource',
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: resolve(PROJECT_PATH, './public/index.html'),
            filename: 'index.html',
            // 特别重要：防止之后使用v6版本 copy-webpack-plugin 时代码修改一刷新页面为空问题。
            cache: false,
            minify: isDev
                ? false
                : {
                      removeAttributeQuotes: true,
                      collapseBooleanAttributes: true,
                      removeComments: true,
                      collapseWhitespace: true,
                      collapseInlineTagWhitespace: true,
                      removeRedundantAttributes: true,
                      removeScriptTypeAttributes: true,
                      removeStyleLinkTypeAttributes: true,
                      minifyCSS: true,
                      minifyJS: true,
                      minifyURLs: true,
                      useShortDoctype: true,
                  },
        }),
        new CopyPlugin({
            patterns: [
                {
                    context: resolve(PROJECT_PATH, './public'),
                    from: '*',
                    to: resolve(PROJECT_PATH, './dist'),
                    toType: 'dir',
                    globOptions: {
                        dot: true,
                        gitignore: true,
                        ignore: ['**/index.html'],
                    },
                },
            ],
        }),
        new ForkTsCheckerWebpackPlugin({
            typescript: {
                configFile: resolve(PROJECT_PATH, './tsconfig.json'),
            },
        }),
        new AntdDayjsWebpackPlugin(),
        new Webpackbar({
            name: isDev ? '项目启动中...' : '项目打包中...',
            color: '#52c41a',
        }),
    ],
};
